<template>
  <div id="crop">
    <el-row>
      <el-col :span="14">
        <div class="crop-box">
          <div class="thumb-box">
            <img :src="imgUrl">
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="preview-box">
          <div>预览</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="btn-box">
          <el-upload :action="uploadurl" ref="upload" :multiple="false"
                     :on-change="previewImage" :auto-upload="false" :show-file-list="false"
                     :on-success="fileUploadResult">
            <el-button slot="trigger">上传</el-button>
            <el-button style="margin-left: 10px;" type="success" @click="submitUpload">确定</el-button>
          </el-upload>
        </div>

      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { createUploadUrl } from '../../assets/js/post.js'
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'crop',
    props: ['personalId'],
    data () {
      return {
        imgUrl: '',
        uploadurl: ''
        // cropBoxClass:{
        // 	'background-image':'',
        // 	'background-repeat:':'no-repeat'
        // }
      }
    },
    created () {
      this.createdComponent()
    },
    mounted () {

    },
    methods: {
      createdComponent () {
        this.uploadurl = createUploadUrl('IMAGE')
      },
      updateComponent () {

      },
      previewImage (file) {
        this.imgUrl = file.url
      },
      submitUpload () {
        this.$refs.upload.submit()
      },
      fileUploadResult (response, file, fileList) {
        let url = response.data_list[0]
        let paragram = new Object()
        paragram.id = this.personalId
      }
    }
  }
</script>
<style scoped>
  .crop-box {
    position: relative;
    display: inline-block;
    height: 350px;
    width: 350px;
    border: 1px solid #aaa;
    background: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
    cursor: move;
  }

  .thumb-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 250px;
    margin-top: -125px;
    margin-left: -100px;
    border: 1px solid #666;
    /*border-radius: 100%;*/
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    background: none repeat scroll 0% 0% transparent;
  }

  .thumb-box img {
    width: 100%;
    height: 100%;
    /*border-radius: 100%;*/

  }

  .preview-box {
    width: 180px;
  }
</style>
